<template>
  <div class="app-container">
       <el-row>
       
          <el-card class="box-card">
                   <el-alert center :title="$t('exemgt.showing_banks_notif')" type="info" :description="$t('exemgt.click_to_show')">
  </el-alert>
              <div slot="header" class="clearfix">
                <span>{{$t('exemgt.banks')}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="$store.state.user.user_perms.includes('1602')" @click="showUploadModal()">{{$t('exemgt.upload')}}</el-button>
            </div>
            <el-row v-if="showExeBanks">
                <div v-for="bank in listData" v-bind:key="bank.value">
             <el-col :span="4" transition="fade" style="margin:10px;" v-if="checkExeData(bank, showall)">
                <div class="rounded mb-2" style="border: 2px solid #ebebeb;
                border-radius: 5px;" 
                @mouseenter="$event.target.classList.add('ishover')" @click="showBankf(bank); showExeBanks = false;" @mouseleave="$event.target.classList.remove('ishover')">
                <img :src="require('./../../assets/images/banks/'+ bank.bank_name + '.png') ? require('./../../assets/images/banks/'+ bank.bank_name + '.png') : require('./../../assets/images/banks/default.png')" class="text-center img-responsive" width="100%"/>
            </div>
            <h6 class="text-center">{{bank.bank_name}}</h6>
        </el-col>
        </div>
    </el-row>
    <el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple">&nbsp;</div></el-col>
  <el-col :span="16" style="text-align:center;"><div class="grid-content bg-purple">
      <el-button type="primary" v-if="showExeBanks === true ? true : false" plain href="#" @click="showAllExe()" style="text-align:center;">{{$t('exemgt.show_toggle')}}</el-button></div>
</el-col>
  <el-col :span="4"><div class="grid-content bg-purple">&nbsp;</div></el-col>
</el-row>
 
</el-card>
</el-row>
<el-row v-if="showBank">
 <div class="col">
    <h2>
    </h2>
</div>
<br>
<el-table :data="listExeData" v-loading.body="listLoading" element-loading-text="Loading" stripe border fit highlight-current-row>
  <el-table-column prop="id" :label="$t('exemgt.id')" sortable width="80"></el-table-column>
  <el-table-column prop="bank_name" :label="$t('exemgt.bankname')" sortable width="120"></el-table-column>
  <el-table-column prop="filename" :label="$t('exemgt.filename')" sortable width="180"></el-table-column>
  <el-table-column prop="version" :label="$t('exemgt.version')" sortable width="150"></el-table-column>
  <el-table-column prop="status" :label="$t('exemgt.status')" sortable width="180">
        <template slot-scope="scope">
            {{getStatus(scope.row.status)}}
        </template>
  </el-table-column>
  <el-table-column prop="description" :label="$t('exemgt.desc')" sortable width="180"></el-table-column>
  <el-table-column prop="updated_by" :label="$t('exemgt.updatedby')" sortable width="180"></el-table-column>
  <el-table-column prop="created_at" :label="$t('exemgt.createdat')" sortable width="180"></el-table-column>
  <el-table-column prop="updated_at" :label="$t('exemgt.updatedat')" sortable width="180"></el-table-column>
  <el-table-column :label="$t('exemgt.action')">
   <template slot-scope="scope">
    <el-button class="btn btn-outline-success" alt="download" :value="scope.row.id" v-if="$store.state.user.user_perms.includes('1603')" @click="download(scope.row.filename)">
        <i class="el-icon-download"></i></el-button>
        <el-button class="btn btn-outline-warning" :value="scope.row.id" v-if="$store.state.user.user_perms.includes('1604')" @click="updateExeRecord(scope.row.id, scope.row.filename)"><i class="el-icon-edit">
        </i></el-button>
        <el-button class="btn btn-outline-danger" :vaue="scope.row.id" v-if="$store.state.user.user_perms.includes('1605')" @click="deleteExeRecord(scope.row.id, scope.row.bank_name)"><i class="el-icon-delete"></i></el-button>
    </template>
</el-table-column>
</el-table>
<br>
<div class="col">
 <el-button type="primary" plain href="#" @click="showBankf(); showExeBanks = true;">{{$t('exemgt.back')}}</el-button>
</div>
</el-row>
<UploadModalVue v-if="uploadModal" :uploadModal.sync="uploadModal"></UploadModalVue>
</div>
</template>
<script>
 import { getBank, getExemgt, deleteExe, updateExe } from '@/api/exemgt'
 import { find, finditem } from '@/utils/helper'
 import UploadModalVue from './UploadModal.vue';
 export default {
    components: {
        UploadModalVue
    },
    data() {
      return {
        listData: [],
        listExeData: {},
        showBank: false,
        showExeBanks: true,
        uploadModal: false,
        exeMgtData: [],
        showall: false
    }
},
methods: {
  showBankf(data){
    this.isLoading = true
    this.showBank = !this.showBank;
    if(this.showBank === true){
       this.listExeData = find(this.exeMgtData, 'bank_name', data.bank_name)
   }
},
getStatus(status){
    return status === 0 ? this.$t('exemgt.inactive') : this.$t('exemgt.active')
},
download(filename){
    var link = `http://` + window.location.hostname + `:12345/hydra/api/exemgt/download_exe?filename=` + filename
    // var link = process.env.BASE_URL + `/hydra/api/exemgt/download_exe?filename=` + filename
    const download = document.createElement('a');
    download.href = link;
    download.setAttribute('download', filename + '.zip');
    document.body.appendChild(download);
    download.click();
},
checkExeData(bank, showall){
    if(showall === true){
        this.showall = true
        return true
    }
   var exedata = finditem(this.exeMgtData, 'bank_name', bank.bank_name)
   if(exedata.length !== 0){
       return true
   }else{
       return false
   }
},
showAllExe(){
    this.showall = !this.showall
    return this.showall
},
deleteExeRecord(id, bank){
    this.$confirm(this.$t('exemgt.confirm_delete') + `${id}？`, this.$t('exe.delete_exe'), {
      confirmButtonText: this.$t('exemgt.submit'),
      cancelButtonText: this.$t('exemgt.cancel'),
      type: 'warning'
  }).then(() => {
      deleteExe(id, bank).then(res => {
        if(res.status === 0){
          this.$message({ type: 'success', message: this.$t('exemgt.success_delete') });
          this.getExemgt()
          this.listExeData.length = 0
          this.listExeData = find(this.exeMgtData, 'bank_name', bank)
      }
  })
  })
},
updateExeRecord(id, filename){
    this.$confirm(this.$t('exemgt.activate_confirm') + ` ${filename}`, this.$t('exemgt.updatestatus'), {
      confirmButtonText: this.$t('exemgt.submit'),
      cancelButtonText: this.$t('exemgt.cancel'),
      type: 'warning'
  }).then(() => {
      updateExe(id, this.$store.state.user.id).then(res => {
        if(res.status === 0){
          this.$message({ type: 'success', message: this.$t('exemgt.update_success') });
          this.getExemgt()
      }
  })
  }).catch(() => {
    
  })
},
getExemgt(){
   getExemgt('all').then(res => {
      if (res.status === 0) {
        this.listLoading = false
        this.exeMgtData.length = 0
        this.exeMgtData = res.data.data
    }
})
},
showUploadModal(){
    this.uploadModal = true
}
},
created(){
  getBank('all').then(res => {
      if (res.status === 0) {
        this.listLoading = false
        this.listData = res.data.data
    }
})
  getExemgt('all').then(res => {
      if (res.status === 0) {
        this.listLoading = false
        this.exeMgtData = res.data.data
    }
})
}
}

export const enExemgt = {
  banks: 'Banks',
  upload: 'Upload',
  id: 'ID',
  bankname: 'Bank Name',
  filename: 'Filename',
  version: 'Version',
  status: 'Status',
  desc: 'Description',
  updatedby: 'UpdatedBy',
  createdat: 'CreatedAt',
  updatedat: 'UpdatedAt',
  action: 'Action',
  back: 'Back',
  updatestatus: 'Update Status',
  submit: 'Submit',
  cancel: 'Cancel',
  activate_confirm: 'Are you sure you want to activate',
  update_success: 'Successfuly updated',
  upload_exe: 'Upload EXE Package',
  select_file: 'Select File',
  confirm: 'Confirm',
  upload_notif: 'Upload should be in .zip format',
  close_notif: 'Are you sure to close this dialog?',
  upload_success: 'You have successfully upload an EXE Package',
  confirm_delete: 'Are you sure to delete ID',
  delete_exe: 'Delete EXE',
  success_delete: 'Successfully deleted',
  active: 'Active',
  inactive: 'Inactive',
  show_toggle: 'Show Toggle',
  showing_banks_notif: 'Showing banks that has data',
  click_to_show: 'Click show all toggle to show all banks'
}

export const zhExemgt = {
  banks: '银行',
  upload: '上传',
  id: 'ID',
  bankname: '银行名',
  filename: '文件名',
  version: '版',
  status: '状态',
  desc: '描述',
  updatedby: '更新者',
  createdat: '创建于',
  updatedat: '更新时间',
  action: '行动',
  back: '背部',
  updatestatus: '更新状态',
  submit: '提交',
  cancel: '取消',
  activate_confirm: '你确定要激活吗？',
  update_success: '成功更新',
  upload_exe: '上传EXE包',
  select_file: '选择文件',
  confirm: '确认',
  upload_notif: '上传应采用.zip格式',
  close_notif: '您确定要关闭此对话框吗？',
  upload_success: '您已成功上传EXE包',
  confirm_delete: '你确定要删除ID吗',
  delete_exe: '删除Exe',
  success_delete: '删除成功',
  active: '活性',
  inactive: '待用',
  show_toggle: '显示切换',
  showing_banks_notif: '显示有数据的银行',
  click_to_show: '点击显示全部切换以显示所有银行'
}

</script>
<style lang="scss" scoped>
.ishover{
    -webkit-box-shadow: 0px 0px 51px -3px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 0px 51px -3px rgba(0,0,0,0.57);
    box-shadow: 0px 0px 51px -3px rgba(0,0,0,0.57);
    transition: .6s;
    cursor: pointer;
}
.visible{
    visibility: visible;
}
.invisible{
    display:none;
    visibility: hidden;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.text-center{
  text-align: center !important;
}
</style>
